<template>
  <div class="register-wrapper">
    <div id="register">
      <el-row>
        <el-col :span="12">
          <p class="title">注册</p>
          <el-form
            :model="ruleForm2"
            status-icon
            :rules="rules2"
            ref="ruleForm2"
            label-width="0"
            class="demo-ruleForm"
          >
            <el-form-item prop="tel">
              <el-input
                v-model="ruleForm2.tel"
                auto-complete="off"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="smscode" class="code">
              <el-input
                v-model="ruleForm2.smscode"
                placeholder="验证码"
              ></el-input>
              <el-button
                type="primary"
                :disabled="isDisabled"
                @click="sendCode"
                >{{ buttonText }}</el-button
              >
            </el-form-item>
            <el-form-item prop="pass">
              <el-input
                type="password"
                v-model="ruleForm2.pass"
                auto-complete="off"
                placeholder="输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item prop="checkPass">
              <el-input
                type="password"
                v-model="ruleForm2.checkPass"
                auto-complete="off"
                placeholder="确认密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="submitForm('ruleForm2')"
                style="width: 100%"
                >注册</el-button
              >
              <p class="login" @click="gotoLogin">已有账号？立即登录</p>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <img
            class="regimg"
            src="@/assets/imgs/earth.gif"
            width="100%"
            height="100%"
            alt="404"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: "Register",
  data() {
    // <!--验证手机号是否合法-->
    let checkTel = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号码"));
      } else if (!this.checkMobile(value)) {
        callback(new Error("手机号码不合法"));
      } else {
        callback();
      }
    };
    //  <!--验证码是否为空-->
    let checkSmscode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机验证码"));
      } else {
        callback();
      }
    };
    // <!--验证密码-->
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm2.checkPass !== "") {
          this.$refs.ruleForm2.validateField("checkPass");
        }
        callback();
      }
    };
    // <!--二次验证密码-->
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm2.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm2: {
        pass: "",
        checkPass: "",
        tel: "",
        smscode: "",
      },
      rules2: {
        pass: [
          { validator: validatePass, trigger: "change" },
          { min: 6, max: 10, message: "密码须为3-10个字符", trigger: "blur" },
        ],
        checkPass: [
          { validator: validatePass2, trigger: "change" },
          { min: 6, max: 10, message: "密码须为3-10个字符", trigger: "blur" },
        ],
        tel: [{ validator: checkTel, trigger: "change" }],
        smscode: [{ validator: checkSmscode, trigger: "change" }],
      },
      buttonText: "发送验证码",
      isDisabled: false, // 是否禁止点击发送验证码按钮
      flag: true,
    };
  },
  methods: {
    // <!--发送验证码-->
    sendCode() {
      this.$axios
        .post("http://url.com/", {
          tel: this.ruleForm2.tel,
          // headers:{"Content-Type":"application/x-www-form-urlencoded"}
        })
        .then((resp) => {
          if (this.checkMobile(tel)) {
            let time = 60;
            this.buttonText = "已发送";
            this.isDisabled = true;
            if (this.flag) {
              this.flag = false;
              let timer = setInterval(() => {
                time--;
                this.buttonText = time + " 秒";
                this.message("发送成功，注意查收");
                if (time === 0) {
                  clearInterval(timer);
                  this.buttonText = "重新获取";
                  this.isDisabled = false;
                  this.flag = true;
                }
              }, 1000);
            }
          }
        })
        .catch((failResponse) => {
          console.log("failResponse");
          return false;
        });
    },
    // <!--提交注册-->
    submitForm(formName) {
      this.$refs.ruleForm2.validate((valid) => {
        if (valid) {
          this.$axios({
            method: "POST",
            url: "/api/relueForm2",
            headers: {
              "Content-Type": "application/json;charset=UTF-8",
            },
            data: {
              tel: this.ruleForm2.tel,
              smscode: this.ruleForm2.smscode,
              pass: this.ruleForm2.pass,
              checkPass: this.ruleForm2.checkPass,
            },
          })
            .then((res) => {
              if (res.data.message === "SUCCESS") {
                this.$router.push("/login");
                this.$notify({
                  title: "提示",
                  message: "注册成功",
                  duration: 2000,
                });
              } else {
                this.$notify({
                  title: "提示",
                  message: "注册失败",
                  duration: 2000,
                });
              }
            })
            .catch(() => {
              his.$notify({
                title: "提示",
                message: "用户访问错误",
                duration: 2000,
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // <!--进入登录页-->
    gotoLogin() {
      this.$router.push({
        path: "/",
        query: { login: "regist" },
      });
      // 无限导航父中组件
      this.$parent.$parent.$parent.$parent.$parent.$children[0].$data.dialogAddgsVisible = true
    },
    // 验证手机号
    checkMobile(str) {
      let re = /^1\d{10}$/;
      if (re.test(str)) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>